<template>
    <div class="lookBody">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form">
            <el-form-item label="目的地" prop="destination" required>
                <el-input v-model="form.destination"></el-input>
            </el-form-item>
            <el-form-item label="出发时间" prop="date" required>
                <el-col :span="10">
                    <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="form.date"
                        style="width: 100%;"
                    ></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="队伍人数" prop="num" required>
                <el-input v-model="form.num"></el-input>
            </el-form-item>
            <el-form-item label="旅游天数" prop="day" required>
                <el-input v-model="form.day"></el-input>
            </el-form-item>
            <el-form-item label="出发地" prop="place" required>
                <el-input v-model="form.place"></el-input>
            </el-form-item>
            <el-form-item label="详细计划" prop="desc" required>
                <el-input
                    type="textarea"
                    v-model="form.desc"
                    placeholder="旅行计划中有哪些亮点？给未来的队友阐述一下详细计划吧~"
                    rows="5"
                ></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone" required>
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="fb">发布</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        var phoneTesting = (rules, value, callback) => {
            if (!value) {
                return callback(new Error("手机号码不能为空"));
            }
            setTimeout(() => {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                    callback(new Error("格式不正确"));
                } else {
                    callback();
                }
            }, 500);
        };
        return {
            form: {
                destination: "",
                date: "",
                num: "",
                day: "",
                place: "",
                desc: ""
            },
            rules: {
                destination: [
                    {
                        required: true,
                        message: "请输入目的地",
                        trigger: "blur"
                    }
                ],
                date: [
                    {
                        required: true,
                        message: "请选择日期",
                        trigger: "blur"
                    }
                ],
                num: [
                    {
                        required: true,
                        message: "请输入人数",
                        trigger: "blur"
                    }
                ],
                day: [
                    {
                        required: true,
                        message: "请输入准备玩多少天",
                        trigger: "blur"
                    }
                ],
                place: [
                    {
                        required: true,
                        message: "请输入出发地",
                        trigger: "blur"
                    }
                ],
                desc: [
                    {
                        required: true,
                        message: "请输入详细计划",
                        trigger: "blur"
                    }
                ],
                phone: [
                    {
                        required: true,
                        validator: phoneTesting,
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    methods: {
        fb() {
            for (const key in this.form) {
                const element = this.form[key];
                if (element == "") {
                    return this.$message({
                        message: "请完整填写表单",
                        type: "warning"
                    });
                }
            }
            this.$message({ message: "上传成功，内容审核中", type: "success" });

            this.$router.push({
                path: "/"
            });
        }
    }
};
</script>
<style>
.lookBody {
    margin: 10px 30px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.form {
    padding: 30px;
}
</style>